<template>
  <!--接种列表-->
  <div style="margin-top: 30px">
    <el-table :data="vaccinateDate" style="width: 100%" height="200">
      <el-table-column fixed prop="id" label="序号" width="80" />
      <el-table-column prop="userid" label="身份证号" width="140" />
      <el-table-column prop="vaccinid" label="疫苗编号" width="120" />
      <el-table-column
        prop="jabsum"
        label="接种针数"
        width="100"
        align="center"
      />
      <el-table-column
        prop="reservationid"
        label="预约编号"
        width="200"
        align="center"
      />
      <el-table-column
        prop="jabtime"
        label="接种时间"
        width="180"
        align="center"
      />

      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button type="warning" size="small" @click="readnotice(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 查看的弹窗 -->
  <el-dialog v-model="dialogVisible" width="50%">
    <h3>
      身份证号:
      <p>{{ form.userid }}</p>
    </h3>
    <h3>
      姓名:
      <p>{{ form.user.name }}</p>
    </h3>
    <h3>
      疫苗编号:
      <p>{{ form.vaccinid }}</p>
    </h3>
    <h3>
      疫苗名称:
      <p>{{ form.vaccin.vname }}</p>
    </h3>
    <h3>
      疫苗生产厂家:
      <p>{{ form.vaccin.maker }}</p>
    </h3>
    <h3>
      疫苗生产时间:
      <p>{{ form.vaccin.createtime }}</p>
    </h3>
    <h3>
      疫苗等级:
      <p>{{ form.vaccin.vrank }}</p>
    </h3>
    <h3>
      疫苗类别:
      <p>{{ form.vaccin.vsort }}</p>
    </h3>
    <h3>
      需接种针数:
      <p>{{ form.vaccin.vjab }}</p>
    </h3>
    <h3>
      此次接种针数:
      <p>{{ form.jabsum }}</p>
    </h3>
    <h3>
      接种时间:
      <p>{{ form.jabtime }}</p>
    </h3>
    <h3>
      接种预约序号:
      <p>{{ form.reservationid }}</p>
    </h3>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'Order',
  data() {
    return {
      UserDate: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 10, //页大小
      userid: 0,
      vaccinateDate: [],
      dialogVisible: false,
      form: {},
      localinfo:
        'https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    };
  },
  methods: {
    getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem('token');
      this.$http
        .post('/inoculations/user/getTokenId', token)
        .then((res) => {
          if (res.statusCode == '200') {
            this.UserDate = res.data;
            this.userid = res.data.idcard;
            this.getvaccinateAll();
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },
    //查看
    readnotice(row) {
      this.form = row;
      this.dialogVisible = true;
    },
    // 获取用户接种信息
    getvaccinateAll() {
      this.$http
        .get('/inoculations/inoculation/pageall', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userid: this.userid,
          },
        })
        .then((res) => {
          if (res.statusCode == '200') {
            this.total = res.data.total;
            this.vaccinateDate = res.data.records;
            // console.log(res.data.records);
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },
  },
  created() {
    this.getuserDate();
  },
};
</script>

<style scoped>
p {
  color: #6495ed;
  margin-left: 5px;
  display: inline;
}
</style>
